<template>
    <topLunBo/>
    <userMessage/>
    <fixedRightTools/>
    <view class="list">
        <view v-for="(item, index) in msgList" :key="index" class="item" :style="{ 'background': `#${(Math.random() * 0xffffff << 0).toString(16)}` }">
            <view class="title">{{item.title}}</view>
            <view class="content">{{item.content}}</view>
        </view>
    </view>
</template>

<script setup>
import fixedRightTools from '@/components/fixedRightTools.vue'
import userMessage from '@/components/userMessage.vue'
import topLunBo from '@/components/topLunBo.vue'

// 功能区
const msgList = [
  {
    title: 'AI修图',
    content: '秒变写真大片',
  },
  {
    title: 'AI协作',
    content: '创意一触即发',
  },
  {
    title: 'AI语音合成',
    content: '将文字转化为不通音色的语音',
  }
]


</script>

<style scoped>
.list {
    width: 95%;
    margin: 0 auto;
  padding: 30rpx 0;
}
.item {
  margin-bottom: 20rpx;
  padding: 20rpx ;
  height: 200rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
.content {
  font-size: 14px;
  color: #dcdcdc;
  line-height: 1.5;
}
</style>